<template>
	<view class="content">
		<u-input placeholder="请输入搜索关键词" prefixIcon="search" shape="circle"
			prefixIconStyle="font-size: 22px;color: #909399" customStyle="margin:20rpx;"></u-input>

		<u-swiper :list="swiperList" indicator circular previousMargin="30" nextMargin="30" @click="hitSwiper"></u-swiper>
		<view class="activity">
			活动专区
			<u-scroll-list :indicator="false">
				<!-- <view v-for="(item, index) in activityList" :key="index"> -->
				<view v-for="(item, index) in 10" :key="index">
					<u--image :src="item.imageUrl" width="120rpx" height="120rpx"></u--image>
					<u--text :text="item.name" align="center"></u--text>
				</view>
			</u-scroll-list>
		</view>
		<view class="discounts">
			优惠
			<u-scroll-list :indicator="false">
				<!-- <view v-for="(item, index) in discountsList" :key="index"> -->
				<view v-for="(item, index) in 10" :key="index">
					<u--image :src="item.imageUrl" width="120rpx" height="120rpx"></u--image>
					<u--text :text="item.name" align="center"></u--text>
				</view>
			</u-scroll-list>
		</view>
		<view class="recommend">
			推荐(推荐商品列表)
			<u-list>
				<!-- <u-list-item v-for="(item, index) in recommendList" :key="index"> -->
				<u-list-item v-for="(item, index) in 10" :key="index">
					<u-cell :title="`列表长度-${index + 1}`">
					</u-cell>
				</u-list-item>
			</u-list>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	const swiperList = ref([
		'https://cdn.uviewui.com/uview/swiper/swiper1.png',
		'https://cdn.uviewui.com/uview/swiper/swiper2.png',
		'https://cdn.uviewui.com/uview/swiper/swiper3.png',
	])
	const baseList = ref([{
			name: 'photo',
			title: '全部'
		},
		{
			name: 'lock',
			title: '家居百货'
		},
		{
			name: 'star',
			title: '特色服务'
		}, {
			name: 'photo',
			title: '其他'
		},
		{
			name: 'lock',
			title: '数码电子'
		},
		{
			name: 'star',
			title: '包装'
		}
	])
	const scrollList = ref([{
			text: '全部',
			src: '/static/home/quanbushangpin.png'
		},
		{
			text: '家居百货',
			src: '/static/home/jiajubaihuo.png'
		},
		{
			text: '特色服务',
			src: '/static/home/chanpintese.png'
		}, {
			text: '其他',
			src: '/static/home/qita.png'
		},
		{
			text: '数码电子',
			src: '/static/home/sm.png'
		},
		{
			text: '包装',
			src: '/static/home/packing.png'
		}
	])
	const activityList = ref([{
		imageUrl: "",
		name: "商品名称"
	}])
	const discountsList = ref([{
		imageUrl: "",
		name: "名称"
	}])
	const recommendList = ref([{
		imageUrl: "",
		name: "名称"
	}])
	const hitSwiper = (index) => {
		console.log(index);
	}
	// onLoad(() => {})
</script>

<style lang="scss" scoped>
	.activity,
	.discounts {
		padding: 20rpx;

		view {
			padding-left: 20rpx;
		}

		view :first-child {
			padding-left: 0;
		}
	}

	.recommend {}
</style>